<template>
    <div id="content">

        <div id="part1">
            <div class="title">订单数据</div>
            <div id="ddsj">
                <div class="part1col">
                    <div class="part1items"><span>今日订单总额</span><span>{{ddsj.dealTodayMoney}}￥</span></div>
                    <div class="part1items"><span>本周订单总额</span><span>{{ddsj.dealWeekMoney}}￥</span></div>
                    <div class="part1items"><span>本月订单总额</span><span>{{ddsj.dealMonthMoney}}￥</span></div>
                    <div class="part1items"><span>历史订单总额</span><span>{{ddsj.dealAllMoney}}￥</span></div>
                </div>
                <div class="xian"></div>
                <div>
                    <div class="part1items"><span>今日订单</span><span>{{ddsj.dealToday}}条</span></div>
                    <div class="part1items"><span>本周订单</span><span>{{ddsj.dealWeek}}条</span></div>
                    <div class="part1items"><span>本月订单</span><span>{{ddsj.dealMonth}}条</span></div>
                    <div class="part1items"><span>历史订单</span><span>{{ddsj.dealAll}}条</span></div>
                </div>
                <div class="xian"></div>
                <div>
                    <div class="part1items"><span>今日退货订单</span><span>{{ddsj.refundToday}}条</span></div>
                    <div class="part1items"><span>本周退货订单</span><span>{{ddsj.refundWeek}}条</span></div>
                    <div class="part1items"><span>本月退货订单</span><span>{{ddsj.refundMonth}}条</span></div>
                    <div class="part1items"><span>历史退货订单</span><span>{{ddsj.refundAll}}条</span></div>
                </div>
            </div>
        </div>
        <div id="part2">
            <div class="title">订单筛选</div>
            <div>
                <div class="part2row">
                    <div>
                        <label for="ddid" class="part2label">订单编号</label>
                        <input type="text" id="ddid" class="part2input" v-model="ddbh">
                    </div>
                    <div>
                        <label for="ddzt" class="part2label">商品名称</label>
                        <input type="text" id="ddzt" class="part2input" v-model="spmc">
                    </div>
                    <div>
                        <label for="ddsj" class="part2label">收货人姓名</label>
                        <input type="text" id="ddcssj" class="part2input" v-model="shrxm">
                    </div>

                </div>
                <div class="part2row">
                    <div>
                        <label for="ssmc" class="part2label">收货人电话</label>
                        <input type="text" id="ssmc" class="part2input" v-model="shrdh">
                    </div>
                    <div>
                        <label for="shrxm" class="part2label">订单产生时间</label>
                        <input type="text" id="shrxm" class="part2input" v-model="ddcssj">
                    </div>
                    <div>
                        <label class="part2label">订单状态</label>
                        <template>
                            <el-select v-model="value" placeholder="请选择"  size="mini">
                                <el-option
                                        v-for="item in options"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                        </template>
                    </div>
                </div>
                <button id="chaxun" @click="CX">查询</button>
            </div>
        </div>
        <div id="part3">
            <div class="title">订单列表</div>
            <!-- 这里是表格-->
            <div>
                <el-tabs v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane label="" name="first">
                        <el-table
                                :header-cell-style="{
                                                        'background-color': '#3899FF',
                                                        'color': 'white',
                                                        'text-align':'center'

                                                     }"
                                :cell-style="{
                                                        'text-align':'center'
                                                     }"
                                :data="tableData"
                                border
                                style="width: 100%">
                            <el-table-column
                                    prop="orderBaseNumber"
                                    label="订单编号">
                            </el-table-column>
                            <el-table-column
                                    prop="goodsName"
                                    label="商品名称">
                            </el-table-column>
                            <el-table-column
                                    prop="orderBaseName"
                                    label="收货人姓名">
                            </el-table-column>
                            <el-table-column
                                    prop="orderBaseTel"
                                    label="收货人手机">
                            </el-table-column>
                            <el-table-column
                                    prop="orderBaseAddress"
                                    label="收货人地址">
                            </el-table-column>
                            <el-table-column
                                    prop="orderBaseCreatTime"
                                    label="订单产生时间">
                            </el-table-column>
                            <el-table-column
                                    prop="orderState"
                                    label="订单状态">
                            </el-table-column>
                            <el-table-column
                                    label="操作">
                                <template slot-scope="scope">
                                    <el-button @click="CKXQ(scope.$index,scope.row)" type="text" size="small">查看详情
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-tab-pane>

                </el-tabs>
            </div>
            <!--这里是分页-->
            <div class="fenye">
                <el-pagination
                        layout="prev, pager, next"
                        :total=totalNum
                        :page-size="5"
                        :page-count="7"
                        @current-change="changePage">

                    <!--                            :total="dataNum" ===》数据总条数-->
                    <!--                            :page-size="5" ===》每页5条数据-->
                    <!--                            :page-count="7"===》当超过7页的时候，分页显示省略号-->
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
    import http from '../../tool/http'
    import API from '../../tool/api'
    export default {
        name: "mxl_ddgl",
        data() {
            return {
                activeName: 'first',
                //订单数据
                ddsj:{},
                tableData: [
                ],
                options: [
                    {
                        value: '1',
                        label: '已完成',
                    },
                    {
                        value: '2',
                        label: '已支付',
                    },
                    {
                        value: '3',
                        label: '已发货'
                    },
                    {
                        value: '4',
                        label: '未退款'
                    },
                    {
                        value: '5',
                        label: '已退款'
                    },
                    {
                        value: '6',
                        label: '未回复'
                    },

                ],
                ssinput:'',
                //查询
                value:'',
                label:'',
                ddbh:'',//订单编号
                spmc:'',//商品名称
                shrxm:'',//收货人姓名
                shrdh:'',//收货人电话
                ddcssj:'',//订单产生时间
                //分页数据
                totalNum:0,
            }
        },
        methods: {
            handleClick(tab, event) {
                console.log(tab, event);
            },
            CX(){
                console.log(typeof this.value)
                if(parseInt(this.value)===1){this.label='用户确认收货'}
                else if(parseInt(this.value)===2){this.label='用户下单'}
                else if(parseInt(this.value)===3){this.label='商家发货'}
                else if(parseInt(this.value)===4){this.label='用户申请退款'}
                else if(parseInt(this.value)===5){this.label='退款成功'}
                else if(parseInt(this.value)===6){this.label='已评论'}
                http(
                    {
                    url:API.CXLB,
                    method: 'post',
                    data:{
                        "orderQueryCondition": {
                            "goodsName":this.spmc,
                            "orderBaseNumber": this.ddbh,
                            "orderDeliveryName":this.shrxm,
                            "orderDeliveryTel": this.shrdh,
                            "orderState":this.label,
                            "startDate":this.ddcssj
                        },
                        "page": {
                            "currentPage": 1,
                            "objectList": [
                                {}
                            ],
                            "pageSize": 5,
                            "totalSize": 0
                        }
                    }
                }).then(resp=>{
                    console.log(resp)
                    this.tableData=[...resp.data.data.objectList]

                })
            },
            //查看详情
            CKXQ(index, item) {
                // console.log(index);
                // console.log(item);
                this.$store.dispatch('receiveData',item.orderBaseId)
                this.$router.push('/ddxq')
            },
            //分页函数
            changePage(val) {
                console.log(val)
            }
        },
        created() {
            http({
                url:API.CXLB,
                method:"post",
                // data:{
                //     "orderQueryCondition": {
                //
                //     },
                //     "page": {
                //         "currentPage": 1,
                //         "objectList": [
                //             {}
                //         ],
                //         "pageSize": 5,
                //         "totalSize": 0
                //     }
                // }
                data:{
                    "orderQueryCondition": {
                        "goodsName": "",
                        "orderBaseNumber": "",
                        "orderDeliveryName": "",
                        "orderDeliveryTel": "",
                        "orderState": ""
                    },
                    "page": {
                        "currentPage": 1,
                        "objectList": [
                            {}
                        ],
                        "pageSize": 4,
                        "totalSize": 0
                    }
                }
            }).then((resp)=>{
                console.log(resp)
                this.tableData=[...resp.data.data.objectList]
                // console.log(this.tableData)
                this.totalNum=resp.data.data.totalSize
            })
            http({
                url:API.DDSJ,
                method:"post",
            }).then(resp=>{
                console.log(resp)
                this.ddsj={...resp.data.data}
            })
        }

    }
</script>

<style scoped>
    #content {
        /*border: 3px solid crimson;*/
        background-color: #F1F3F7;
    }

    /*==========part1==========================*/
    #part1 {
        /*border: 1px solid blue;*/
        background-color: white;
        /*margin: 20px auto;*/
    }

    #ddsj {
        display: flex;
        justify-content: center;
    }

    .part1col {
        /*border: 1px solid #55ffe1;*/
        margin-bottom: 30px;
    }

    .xian {
        /*width: 1px ;*/
        border-right: 1px solid #3899FF;
        margin: 0 150px 30px 150px;
    }

    /*==========part2==========================*/
    #part2 {
        /*border: 3px solid #2bd7ff;*/
        background-color: white;
        margin: 20px auto;
    }

    .part2row {
        /*border: 1px solid royalblue;*/
        /*width: 1200px;*/
        margin: 15px auto;
        display: flex;
        justify-content: space-around;
    }

    .part2label {
        display: inline-block;
        width: 120px;
        height: 22px;
        line-height: 22px;
        /*border: 1px solid red;*/
        text-align: right;
        margin: 0 10px;

    }

    .part2input {
        width: 191px;
        border: 1px solid #DCDFE6;
        height: 24px;
        border-radius: 5px;
        outline: none;
    }

    #chaxun {
        border: none;
        background-color: #3899FF;
        width: 80px;
        height: 30px;
        border-radius: 5px;
        margin-left: 85%;
        margin-top: 15px;
        margin-bottom: 15px;
        color: white;
    }

    /*==========part3==========================*/
    #part3 {
        /*border: 3px solid #19ff96;*/
        background-color: white;
        margin: 20px auto;
        position: relative;
    }

    .title {
        color: #3899FF;
        font-size: 20px;
    }

    .part1items {
        padding: 10px 0;
    }

    /*=========分页===========*/
    .fenye {
        position: absolute;
        /*border: 5px solid chartreuse;*/
        margin: 0 auto;
        width: 100%;
        text-align: center;
    }
</style>